import React from 'react';
import { Search, Menu, Button } from '@alifd/next';
const {dialog} = require('electron').remote;
const fs = require('fs'); // Load the File System to execute our common tasks (CRUD)
     


class FileSearch extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            visible: false,
            value: './',
            menuData: []
        };

        this.onVisibleChange = this.onVisibleChange.bind(this);
        this.onSearch = this.onSearch.bind(this);
        this.onChange = this.onChange.bind(this);
        this.onFocus = this.onFocus.bind(this);
        this.showDialog = this.showDialog(this);
    }

    showDialog() {
        dialog.showOpenDialog({ properties: ['openDirectory'] }, (filename) => {
            if (filename.length === 1) {
                this.setState({
                    value: filename[0]
                })
                this.renderMenu()
            }
        })
    }

    renderMenu() {

        fs.readdir(this.state.value, (err, files) => {
            files.forEach(file => {
                this.state.menuData.push(file)
            });
        });

        let menuData = this.state.menuData;

        return (<Menu onSelect={this.onSelect.bind(this)} rtl className="diy-menu" selectMode="single">
            <Menu.Group label="Recent" key="xxx">
                {menuData.map((item) => {
                    return (<Menu.Item key={item.value}>
                        {item.label}
                        <Button className="diy-menu-button" onClick={this.onDelete.bind(this, item.index)} text>Delete</Button>
                    </Menu.Item>);
                })}
            </Menu.Group>
        </Menu>);
    }

    onSearch(value) {
        console.log(value);
    }

    onChange(value) {
        this.setState({
            visible: value.length > 0,
            value: value
        });
    }

    onSelect(selectedKeys) {
        this.setState({
            visible: false,
            value: selectedKeys[0]
        });
    }

    onDelete(index, e) {
        e.stopPropagation();

        const menuData = this.state.menuData;

        const menuDataNew = [];

        menuData.forEach(function (item) {
            if (item.index !== index) {
                menuDataNew.push(item);
            }
        });

        this.setState({
            menuData: menuDataNew
        });
    }

    onFocus() {
        this.setState({
            visible: true
        });
    }

    onVisibleChange() {
        this.setState({
            visible: false
        });
    }

    render() {
        const {visible, value} = this.state;

        return (<div style={{width: 700}}>
            <Search
                onVisibleChange={this.onVisibleChange}
                popupContent={this.renderMenu()}
                visible={visible}
                value={value}
                onSearch={this.onSearch}
                onChange={this.onChange}
                onFocus={this.showDialog}
            />
        </div>);
    }
}

export default FileSearch;
